<template>
    <div class="templateO">
        <div class="templateO-title">
            <span>客户查看权限</span>
            <div class="templateO-btn" style="float: right">
                <div @click="emptyCustomer" style="cursor:pointer;"><img src="../../../assets/images/empty.png" alt="" title="清空"></div>
                <div @click="addCustomerAuthorizedData" style="cursor:pointer;"><img src="../../../assets/images/icon-add.png" alt="" title="新增"></div>
                <div @click="deleteAuthorization(customerSelectRowId)" style="cursor:pointer;"><img src="../../../assets/images/icon-del.png" alt="" title="删除"></div>
                <div @click="allAuthorization" style="cursor:pointer;"><img src="../../../assets/images/allAuthorized.png" alt="" title="全部授权"></div>
                <div @click="customerRefrens" style="cursor:pointer;"><img src="../../../assets/images/icon-refresh.png" alt="" title="刷新"></div>
            </div>
        </div>
        <el-scrollbar style="height: calc(100% - 40px);">
            <el-table :show-header="false" :highlight-current-row="true" :data="CustomerPermissionRow" @row-click="handleSelectionChange" style="width: 100%">
                <el-table-column property="name"></el-table-column>
            </el-table>
            
        </el-scrollbar>
        <div class="saveBtn">
            <el-button  type="primary" class="operatorBtn" @click="addCustomerAuthorized">保存</el-button>
        </div>
    </div>
</template>
<script>
/**
 * 授权---客户查看权限
 * zqf
 */
export default {
    data(){
        return{
            CustomerPermissionRow: this.$store.state.userManagementStore.CustomerPermissionRow,//客户查看权限数据
            customerSelectRowId:[],
            systemId: this.$store.state.systemId,
            userId: this.$store.state.userManagementStore.userId,
        }
    },
    methods:{
        handleSelectionChange(row, event, column) {            //点击表格选中触发
            this.customerSelectRowId = row['id'];
        },
        allAuthorization(){                                     //客户全部授权
            this.$http.get(this.$url + 'userManage/findAllClient').then(res => {
                if(res.data.code === 20001) {
                    setTimeout(() => {
                        this.CustomerPermissionRow = res.data.data;
                    }, 500);
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(err => {
                this.$message.error(err);
            })
        },
        customerRefrens(){                                      //客户查看权限刷新
             this.$store.dispatch('userManagementStore/getCustomerPermission', this.$url + 'userManage/findClientPower?userId=' + this.userId);
        },
        addCustomerAuthorized(){                                //客户查看权限保存
            let clientids = [];
            for(var i = 0; i < this.CustomerPermissionRow.length; i++) {
                clientids.push(this.CustomerPermissionRow[i]['id']);
            }
            var type = {
                headers: {
                    'Content-type': 'application/json;charset=UTF-8'
                }
            }
            this.$http.post(this.$url + 'userManage/saveEmpClient?userId=' + this.userId + '&systemId=' + this.systemId, JSON.stringify(clientids),type).then(res => {
                if(res.data.code === 20001) {
                    this.$store.dispatch('userManagementStore/getSearch', this.$url + 'userManage/search');
                    this.$message({message: '保存成功', type: 'success'});
                    setTimeout(() => {
                        this.$store.dispatch('userManagementStore/getCustomerPermission', this.$url + 'userManage/findClientPower?userId=' + this.userId);
                        let expandNodeId = this.$store.state.userManagementStore.expandNodeId;
                        this.$store.dispatch('userManagementStore/getEmployeeDataByDepartmentId', expandNodeId);			//刷新数据
                        this.$store.dispatch('userManagementStore/getSearch');
                    }, 500);
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(err => {
                this.$message.error(err);
            })
        },
        emptyCustomer(){                                        //客户查看权限清空
            this.CustomerPermissionRow = [];
        },
        addCustomerAuthorizedData(){                            //客户查看权限新增
            this.$util.openLayerIframe({title: '新增客户查看权限', zIndex: 13, width: '450px', height: '360px', url: this.$domain + '/#/userManagement/addCustomerAuthorized'});
        },
        deleteAuthorization(arrs){                              //客户查看权限删除
            let arr = this.CustomerPermissionRow;
            arr.forEach((item, index) => {
                if(item['id'] == arrs) {
                    arr.splice(index, 1)
                }
            });
        },
    },
    mounted(){
        this.$store.dispatch('userManagementStore/getCustomerPermission', this.$url + 'userManage/findClientPower?userId=' + this.userId);
        setTimeout(() => {
            this.CustomerPermissionRow = this.$store.state.userManagementStore.CustomerPermissionRow;
        });
    }
}
</script>
<style>
    .templateO .el-scrollbar__wrap{overflow-x: auto !important;}
</style>
<style lang="less" scoped>
    .operatorBtn{
        padding: 9px 112px !important;
        margin-top: 10px;
    }
    .saveBtn{
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .templateO {
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 6px;
        width: 100%;
        .el-scrollbar__wrap{
            overflow-x: auto;
        }
        .templateO-title {
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            font-size: 15px;
            margin-bottom: 10px;
            .templateO-btn{
                float: right;
                div{
                    display: inline-block;
                    margin-left: 10px;
                }
            }
        }
        .templateO-li{
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #797979;
            height: calc(100% - 10px) !important;
            overflow-y: auto;
            li{
                margin-bottom: 5px;
            }
        }
    }
</style>
